<template>
    <div class="MusicDetail">
        <img :src="playList[playListIndex].al.picUrl" alt="" class="bigImg">
        <div class="detailTop">
            <span>
                <svg class="icon" aria-hidden="true" @click="updateDetailShow">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
            </span>
            <span class="musicName">
                <Vue3Marquee>
                    {{playList[playListIndex].name}}
                </Vue3Marquee>
                <p class="audor">{{playList[playListIndex].ar.name}}</p>
            </span>
            <span>
                <svg class="icon fengxiang" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
            </span>
            
        </div>
        <div class="detailContent"  @click="updateIsLysrcShow(true)" v-show="!isLyricShow">
            <img src="@/assets/needle-ab.png" alt="" class="needle" :class="{needle_1:!isbtnShow}">
            <img src="@/assets/cd.png" alt="" class="cd">
            <img :src="playList[playListIndex].al.picUrl" alt="" class="pic" :class="{pic_active:!isbtnShow,pic_paused:isbtnShow}">
        </div>
        <div class="detailLyric" ref="detailLyric" @click="updateIsLysrcShow(false)" v-show="isLyricShow">
            <p v-for="item in lyric" :key="item" :class="{active:currentTime * 1000 >= item.time && currentTime * 1000 < item.pre}">
                {{item.lrc}}
            </p>
        </div>
        <div class="detailFooter">
            <div class="footerTop">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-aixin1"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinlechangpian"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31xiaoxi"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-"></use>
                </svg>

            </div>
            <div class="progressBar">
                <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
            </div>
            <div class="footerBottom">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiaoxunhuan"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="updateplayListIndex(playListIndex-1)">
                    <use xlink:href="#icon-shangyishoushangyige"></use>
                </svg>
                <svg class="icon bofang" aria-hidden="true" @click="play" v-if="isbtnShow">
                    <use xlink:href="#icon-bofanganniu"></use>
                </svg>
                <svg class="icon bofang" aria-hidden="true" @click="play" v-else>
                    <use xlink:href="#icon-zanting"></use>
                </svg>
                <svg class="icon" aria-hidden="true" @click="updateplayListIndex(playListIndex+1)">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gf-playlistMusic"></use>
                </svg>

            </div>
        </div>

    </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex'
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { onMounted } from 'vue'
import {getMusicLyric} from '@/request/api.js'


export default {
    // data(){
    //     return{
    //         isLyricShow:false
    //     }
    // },
    components: {
    Vue3Marquee,
  },
    props:['play','addDuration'],
    mounted(){
        //页面渲染时启动
        this.addDuration()
    },
    computed:{
        ...mapState(['playList','playListIndex','isbtnShow','playId',"lyricList","currentTime","isLyricShow","duration"]),
        lyric:function(){
            let arr;
            if(this.lyricList.lyric){
                arr=this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
                    let min=item.slice(1,3);
                    let sec=item.slice(4,6);
                    let mill=item.slice(7,10);
                    let lrc=item.slice(11,item.length);
                    // 当前歌词所在毫秒数
                    let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)
                    if(isNaN(Number(mill))){
                        mill=item.slice(7,9);
                        lrc=item.slice(10,item.length);
                        let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)
                    }
                    return {min,sec,mill,lrc,time}
                })
                arr.forEach((item,i)=>{
                    if(i===arr.length-1 || isNaN(arr[i+1].time)){
                        item.pre=100000
                    }else{
                        item.pre=arr[i+1].time
                    }
                })
            }
            // console.log('歌词分解');
            // console.log(arr);
            return arr
        }
    },
    watch:{
        currentTime:function(newValue){
            let p = document.querySelector("p.active");
            console.log([p]);
            if (p) {
                if (p.offsetTop > 300) {
                this.$refs.detailLyric.scrollTop = p.offsetTop - 300;
            }
        }
        if(newValue===this.duration){
            if(this.playListIndex===this.playList.length-1){
            this.updatePlayListIndex(0);
            this.play()
            }else{
                updateplayListIndex(this.playListindex+1)
            }         
        }
        }
    },
    methods:{

        ...mapMutations(['updateIsbtnShow','updateDetailShow','updateIsLysrcShow','updateplayListIndex'])
    },
    
}
</script>

<style lang="less" scoped>
.MusicDetail{
    width: 100%;
    height: 100%;
    .bigImg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        filter: blur(70px);
        //  border-radius: 0.2rem;
    }
    .detailTop{
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
        .icon{
            width: 30px;
            height: 30px;
        }
        .musicName{
            font-size: 16px;
            font-weight: 500;
            .audor{
            font-size: 14px;
            color: #fff;
        }
        }
    }
    .detailContent{
        width: 100%;
        height: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .needle{
            width: 90px;
            position: absolute;
            top: 20px;
            right: 125px;
            transform-origin: 0 0;
            transform: rotate(-20deg);
            transition: all 1s;
        }
        .needle_1{
            width: 90px;
            position: absolute;
            top: 20px;
            right: 125px;
            transform-origin: 0 0;
            transform: rotate(-5deg);
            transition: all 1s;
        }
        .cd{
            position: absolute;
            top: 106px;
            z-index: -1;
            width: 250px;
            height: 250px
        }
        .pic{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            position: absolute;
            top: 154px;
            animation: rotate_pic 10s linear infinite;
        }
        .pic_active{
            animation-play-state: running;
        }
        .pic_paused{
            animation-play-state: paused;
        }
        @keyframes rotate_pic {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
    }
    .detailLyric{
        width: 100%;
        height: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        // 溢出滚动
        overflow: scroll;
        p{
            color: rgb(213, 204, 204);
            margin-top: 20px;
        }
        .active{
            color: #fff;
            font-size:20px;
        }
    }
    .detailFooter{
        width: 100%;
        position: absolute;
        bottom: 0;
        .footerTop{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 80px;
            .icon{
                width: 30px;
                height: 30px;
                color: #fff;
            }
        }
        .range{
            width: 100%;
            height: 3px;
        }
        .footerBottom{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 80px;
            .icon{
                width: 30px;
                height: 30px;
                color: #fff;
            }
            .bofang{
                width: 60px;
                height: 60px;
            }
        }
    }

}
</style>